/**
 * 配置生产环境常用的配置: 让生产代码、更稳、性能更好、更安全
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 *    把css单独提取到独立css文件夹
 *    步骤          Tips: 只要是plugins内容, 都需要提前使用require导入
 *    1.安装插件 npm i mini-css-extract-plugin -D
 *    2.在plugins中配置 plugins: [new MiniCssExtractPlugin({ filename: 'css/app.js' }) ]
 *    3.注释module.rules.use数组中的 style-loader, 这个loader作用是用js在html创建style标签, 将样式引入进去
 */


const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {resolve} = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      // 配置css
      {
        test: /\.(css)$/,
        use: [
          // 'style-loader', // 创建style标签, 将样式放入
          // 这个loader取代style-loader.  作用: 提取js中的css成单独文件, 所以style-loader就不需要了
          MiniCssExtractPlugin.loader,
          'css-loader'    // 将css文件整合到js文件中
        ],
        // Tips: 样式并没有输出到一个单独的css文件中, 而是输出到js/built.js中, 以字符串的形式存在的
        // Tips: 由于使用了 MiniCssExtractPlugin.loader 将css单独生成文件了, 可以在使用插件传入参数, 设置路径和文件名
        // options: {
        //   outputPath: 'css'
        // }
      },
      // 配置less
      {
        test: /\.(less)$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      // 配置图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1000,
          name: '[hash:8].[ext]',
          // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
          esModule: false,
          // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
          outputPath: 'img'
        }
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        options: {
          name: '[hash:8].[ext]',
        }
      },
      // 配置其他资源, 如字体
      {
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({
    template: "./src/index.html"
  }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/app.css'
    })
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true
  }
}
